<template>
  <div class="dashboard-container">
    <div class="app-container">
      <head-tool>
        <div slot="after">
          <el-button @click="exportExcel" type="warning" size="small"
            >导出
          </el-button>
          <el-button
            size="small"
            type="primary"
            @click="$router.push({ path: '/import', query: { type: 'emp' } })"
            >导入</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="showDialog = true"
            >新增员工</el-button
          >
        </div>
      </head-tool>
      <el-card class="box-card">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="username" label="姓名"> </el-table-column>
          <el-table-column label="头像">
            <template slot-scope="{ row }">
              <img
                :src="row.staffPhoto"
                alt=""
                v-imgerror="defaultImg"
                width="60px"
                @click="showQr(row.staffPhoto)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号"> </el-table-column>
          <el-table-column prop="workNumber" label="工号"> </el-table-column>
          <el-table-column prop="formOfEmployment" label="聘用类型">
            <template slot-scope="{ row }">
              <!-- 时间格式处理的过滤器  -->
              {{ row.formOfEmployment | formatHireType }}
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门">
          </el-table-column>

          <el-table-column prop="timeOfEntry" label="入职时间">
            <template slot-scope="{ row }">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="enableState" label="状态">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.enableState"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="230px">
            <template slot-scope="{ row }">
              <div style="display: flex; justify-content: space-between">
                <el-link
                  @click="
                    $router.push({
                      path: '/employees/detail',
                      query: { id: row.id }
                    })
                  "
                  type="primary"
                  >查看</el-link
                >
                <el-link type="primary">转正</el-link>
                <el-link type="primary">调岗</el-link>
                <el-link type="primary">离职</el-link>
                <el-link type="primary" @click="showRole(row.id)">角色</el-link>
                <el-link type="primary" @click="delEmp(row.id)">删除</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页 -->
      <el-pagination
        @current-change="pageChange"
        style="text-align:center; margin-top:20px"
        :current-page.sync="pageInfo.page"
        :page-size="pageInfo.pagesize"
        layout="total, prev, pager, next"
        :total="pageInfo.total"
      >
      </el-pagination>
      <!-- 弹出层 -->
      <addemployees :showDialog.sync="showDialog" />

      <!-- 弹出层  -->
      <el-dialog :visible.sync="showQrdialog" title="查看二维码">
        <el-row type="flex" justify="center">
          <canvas ref="canvas"></canvas>
        </el-row>
      </el-dialog>
      <role-setting
        ref="role"
        :showRoleDialog.sync="showRoleDialog"
        :userId="currentId"
      ></role-setting>
    </div>
  </div>
</template>

<script>
// 导入接口
import { getEmpList, delEmp } from '@/api/employees'
// 导入枚举库
import constant from '@/api/constant/employees'
// 导入组件
import addemployees from './components/add-employees.vue'
// 导入处理日期的函数
import { formatDate } from '@/filters'
// 导入生成二维码的插件
import qrcode from 'qrcode'
// 导入组件
import roleSetting from './components/role-setting.vue'
export default {
  name: 'emp',
  // 组件
  components: { addemployees, roleSetting },
  data () {
    return {
      // 表格的数据
      tableData: [],
      // 页码绑定的数据  和请求接口需要用到的数据
      pageInfo: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      // 默认头像
      defaultImg: require('@/assets/common/head.jpg'),
      showDialog: false,
      showQrdialog: false, //  显示二维码的弹出框
      showRoleDialog: false, // 显示role-setting子组件的对话框
      currentId: '' //向role-setting 子组件传递的id
    }
  },

  // 生命周期钩子
  created () {
    // 调用封装的获取员工列表函数
    this.getEmpList()
  },
  methods: {
    // 角色按钮的点击事件
    showRole (id) {
      // 显示对话框
      this.showRoleDialog = true
      // 传递id
      this.currentId = id
      // 调用子组件中获取用户基本信息的方法
      this.$refs.role.getUserBasicInfo(id)
    },
    // 头像的点击事件
    // 生成二维码
    showQr (url) {
      // 判断有没有图片 如果有图片 显示对话框 加载二维码
      //  如果没有图片 就弹出消息提示用户
      if (url) {
        // 显示对话框
        this.showQrdialog = true
        // 因为element组件中 对话框如果隐藏的话 里面的dom元素不会渲染 所以
        this.$nextTick(() => {
          qrcode.toCanvas(this.$refs.canvas, url)
        })
      } else {
        this.$message.warning('改员工没有头像！')
      }
    },
    // 封装获取员工列表的函数
    async getEmpList () {
      let res = await getEmpList(this.pageInfo)
      // console.log(res)
      // 绑定数据
      this.tableData = res.data.rows
      // 因为服务器返回的数据是 1 或0
      // 但是el-awich只能传递布尔累心的值
      //  所以将服务器返回的数据做一个处理  如果服务器返回的是1 就替换为true
      this.tableData.forEach(item => {
        item.enableState = item.enableState == 1 ? true : false
      })
      // 总数量
      this.pageInfo.total = res.data.total
    },
    // 删除员工
    async delEmp (id) {
      try {
        await this.$confirm(`确定要删除此员工吗?`, '温馨提示')
        // 下面代码能执行就代表点击了确定
        let res = await delEmp(id)
        // console.log(res)
        this.$message.success(res.message)
        // 判断如果只有一条数据 并且不是只有一页  就加载上一页数据
        if (this.tableData.length == 1 && this.pageInfo.page != 1) {
          this.pageInfo.page--
        }
        // 重新获取最新员工列表
        this.getEmpList()
      } catch (error) {
        // 点击了取消
        console.log(error)
      }
    },

    // 页码改变的事件
    pageChange (page) {
      this.pageInfo.page = page
      this.getEmpList()
    },
    // 导出excel
    async exportExcel () {
      //请求所有员工数据
      let res = await getEmpList({ page: 1, size: this.pageInfo.total })

      let list = res.data.rows

      // 表头的对应关系
      const headers = {
        手机号: 'mobile',
        姓名: 'username',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }
      let keys = Object.keys(headers)
      // 因为需要的是二维数组 而此时list数组中的元素是对象
      // 遍历list数组  通过headers headers 里有几个元素 就遍历出对象里的元素
      let bigArr = list.map(item => {
        let arr = []
        for (let key in headers) {
          let engKey = headers[key]
          if (key == '入职日期' || key == '转正日期') {
            let res = formatDate(item[engKey])
            arr.push(res)
          } else if (key == '聘用形式') {
            // 如果是聘用形式 处理
            let str = item[engKey] == 1 ? '正式' : '未知'
            arr.push(str)
          } else {
            arr.push(item[engKey])
          }
        }
        return arr
      })
      // 懒加载使用插件的方法
      // 哪里要用 就在哪里导入插件对应的js
      // 导入成功就调用 .then
      import('@/vendor/Export2Excel').then(excel => {
        // 插件里写了这个方法
        excel.export_json_to_excel({
          header: keys, //表头 必填
          data: bigArr, //具体数据 必填 二维数组
          filename: '员工列表' //非必填 文件名
          // autoWidth: true, //非必填 单元格是否要自适应宽度 默认就是true
          // bookType: 'xlsx' //非必填 导出文件类型 默认就是xlsx
        })
      })
    }
  },
  // 过滤器
  filters: {
    formatHireType (val) {
      let list = constant.hireType.filter(item => item.id == val)
      // console.log(list)
      return list[0] ? list[0].value : '未知'
    }
  }
}
</script>

<style></style>
